<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
<style>
div {
    background-color: white;
}

div#shadow-host:focus {
    background-color: green;
}
</style>
<body>
<div id="sandbox"></div>
</body>
<script>
function buildNestedDistributionTree(delegatesFocus1, delegatesFocus2) {
    var sandbox = document.querySelector('#sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
        createDOM('div', {},
            createDOM('input', {'id': 'outer-input'}),
            createDOM('div', {'id': 'shadow-host'},
                createDOM('input', {'id': 'input1'}),
                attachShadow(
                    {'mode': 'open', 'delegatesFocus': delegatesFocus1},
                    createDOM('style', {},
                        document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
                    createDOM('input', {'id': 'input2'}),
                    createDOM('div', {'id': 'inner-shadow-host'},
                        createDOM('slot', {}),  // #input1 goes here
                        attachShadow(
                            {'mode': 'open', 'delegatesFocus': delegatesFocus2},
                            createDOM('slot', {}),  // #input1 redistributed here,  #input2 goes here.
                            createDOM('input', {'id': 'input3'})))))));

}

function testNestedDistribution() {
    debug('testing nested distribution');

    buildNestedDistributionTree(false, false);

    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

    var outerInput = getNodeInComposedTree('outer-input');
    var input1 = getNodeInComposedTree('input1');
    var input2 = getNodeInComposedTree('shadow-host/input2');
    var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');

    debug('#input1, #input2 are (re)distributed in the same treescope as #input3, but :focus on shadow host only matches when a focused element is under its shadow tree.');

    debug('(1/4) top and inner shadow do not delegate focus.');
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input1.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input3.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    debug('(2/4) top shadow delegates, but inner shadow does not.');
    buildNestedDistributionTree(true, false);

    var outerInput = getNodeInComposedTree('outer-input');
    var input1 = getNodeInComposedTree('input1');
    var input2 = getNodeInComposedTree('shadow-host/input2');
    var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');

    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input1.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input3.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    debug('(3/4) top shadow does not delegate, but inner shadow does.');
    buildNestedDistributionTree(false, true);

    var outerInput = getNodeInComposedTree('outer-input');
    var input1 = getNodeInComposedTree('input1');
    var input2 = getNodeInComposedTree('shadow-host/input2');
    var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');

    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input1.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input3.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');

    debug('(4/4) both shadow hosts delagate focus.');
    buildNestedDistributionTree(true, true);

    var outerInput = getNodeInComposedTree('outer-input');
    var input1 = getNodeInComposedTree('input1');
    var input2 = getNodeInComposedTree('shadow-host/input2');
    var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3');

    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input1.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    input3.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
}

testNestedDistribution();
</script>
